// 颜色变量
:root {
  // 主色调
  --primary-color: #1890ff;
  --primary-light: #40a9ff;
  --primary-dark: #096dd9;
  
  // 辅助色
  --success-color: #52c41a;
  --warning-color: #faad14;
  --error-color: #ff4d4f;
  --info-color: #1890ff;
  
  // 中性色
  --text-primary: #262626;
  --text-secondary: #595959;
  --text-tertiary: #8c8c8c;
  --text-quaternary: #bfbfbf;
  
  // 背景色
  --bg-primary: #ffffff;
  --bg-secondary: #fafafa;
  --bg-tertiary: #f5f5f5;
  --bg-quaternary: #f0f0f0;
  
  // 边框色
  --border-primary: #d9d9d9;
  --border-secondary: #f0f0f0;
  
  // 阴影
  --shadow-light: 0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-medium: 0 4px 12px rgba(0, 0, 0, 0.1);
  --shadow-heavy: 0 8px 24px rgba(0, 0, 0, 0.12);
  
  // 圆角
  --border-radius-small: 4px;
  --border-radius-medium: 6px;
  --border-radius-large: 8px;
  --border-radius-xl: 12px;
  
  // 间距
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-xxl: 48px;
  
  // 字体大小
  --font-size-xs: 12px;
  --font-size-sm: 14px;
  --font-size-md: 16px;
  --font-size-lg: 18px;
  --font-size-xl: 20px;
  --font-size-xxl: 24px;
  
  // 行高
  --line-height-tight: 1.2;
  --line-height-normal: 1.5;
  --line-height-loose: 1.8;
  
  // 过渡动画
  --transition-fast: 0.15s ease-in-out;
  --transition-normal: 0.3s ease-in-out;
  --transition-slow: 0.5s ease-in-out;
  
  // Z-index
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;
  --z-toast: 1080;
}

// 暗色主题
[data-theme='dark'] {
  // 主色调保持不变
  
  // 中性色
  --text-primary: #ffffff;
  --text-secondary: #d9d9d9;
  --text-tertiary: #8c8c8c;
  --text-quaternary: #595959;
  
  // 背景色
  --bg-primary: #141414;
  --bg-secondary: #1f1f1f;
  --bg-tertiary: #262626;
  --bg-quaternary: #2f2f2f;
  
  // 边框色
  --border-primary: #434343;
  --border-secondary: #303030;
}

// SCSS变量（兼容性）
$primary-color: var(--primary-color);
$success-color: var(--success-color);
$warning-color: var(--warning-color);
$error-color: var(--error-color);
$info-color: var(--info-color);

$text-primary: var(--text-primary);
$text-secondary: var(--text-secondary);
$text-tertiary: var(--text-tertiary);

$bg-primary: var(--bg-primary);
$bg-secondary: var(--bg-secondary);
$bg-tertiary: var(--bg-tertiary);

$border-primary: var(--border-primary);
$border-secondary: var(--border-secondary);

$shadow-light: var(--shadow-light);
$shadow-medium: var(--shadow-medium);
$shadow-heavy: var(--shadow-heavy);

$border-radius-small: var(--border-radius-small);
$border-radius-medium: var(--border-radius-medium);
$border-radius-large: var(--border-radius-large);

$spacing-xs: var(--spacing-xs);
$spacing-sm: var(--spacing-sm);
$spacing-md: var(--spacing-md);
$spacing-lg: var(--spacing-lg);
$spacing-xl: var(--spacing-xl);

$font-size-xs: var(--font-size-xs);
$font-size-sm: var(--font-size-sm);
$font-size-md: var(--font-size-md);
$font-size-lg: var(--font-size-lg);
$font-size-xl: var(--font-size-xl);

$transition-fast: var(--transition-fast);
$transition-normal: var(--transition-normal);
$transition-slow: var(--transition-slow); 